Skip to main content

Angular Site

What is Angular?​

Angular is a popular open-source web application framework developed and maintained by Google. It is used to build dynamic, single-page web applications (SPAs) with a powerful structure that allows for scalable, maintainable, and testable code.

🔹 Key Features of Angular:​

  1. Component-Based Architecture

    Angular applications are built using components, which are modular, reusable building blocks for the UI.

  2. Two-Way Data Binding

    Automatically synchronizes data between the model (business logic) and the view (UI), making the development process faster.

  3. Dependency Injection

    Angular has a built-in dependency injection system, making components more modular and easier to test.

  4. TypeScript Support

    Angular is built with TypeScript, a statically typed superset of JavaScript, enhancing development with better tooling and error checking.

  5. Directives

    Special markers in templates that tell Angular to attach specific behavior to DOM elements.

  6. Routing

    Built-in routing capabilities allow developers to build SPAs that navigate between views without full page reloads.

  7. RxJS and Observables

    Angular leverages RxJS for reactive programming and handling asynchronous events like data streams.

🔸 Use Cases​

  • Enterprise-grade web apps
  • Progressive Web Applications (PWAs)
  • Admin dashboards
  • Real-time applications (e.g., chat apps)

🔧 Popular Tools & Ecosystem​

  • Angular CLI (Command Line Interface) – For scaffolding and managing Angular apps
  • Angular Material – Pre-built UI components based on Google’s Material Design
  • NgRx – State management library for Angular using Redux patterns

📌 Example Companies Using Angular:​

  • Google
  • Microsoft
  • Deutsche Bank
  • Upwork

BluBuddy Widget Installation Guide for Angular Websites​

Overview

This guide provides a detailed step-by-step process to integrate BluBuddy Chatbot Widgets into your Angular application using custom JavaScript embed code.

Prerequisites

  • Angular CLI installed
  • Angular project already set up
  • BluBuddy Widget code snippet get it from here : Setup Chatbot

Steps to Install BluBuddy Widget​

Step 1: Locate Your BluBuddy Widget Code

  • Obtain your custom BluBuddy widget script. It will look like this:
<!-- BluBuddy Widget Code -->
<script>
  (function (d, s) {
    var js = d.createElement(s);
    js.src =
      "https://cdn.jsdelivr.net/gh/atozdebug/chatbot-widget@latest/index.js";
    js.async = true;
    d.head.appendChild(js);
  })(document, "script");
</script>

Step 2: Add Widget Code to Angular

You can add the widget script to your Angular app using one of the two standard methods:

Method 1: Add in index.html

  1. Open src/index.html
  2. Paste the BluBuddy widget code just before the closing </body> tag:
<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Your Angular App</title>
  </head>
  <body>
    <app-root></app-root>

    <!-- BluBuddy Widget Code -->
    <script>
      (function (d, s) {
        var js = d.createElement(s);
        js.src =
          "https://cdn.jsdelivr.net/gh/atozdebug/chatbot-widget@latest/index.js";
        js.async = true;
        d.head.appendChild(js);
      })(document, "script");
    </script>
  </body>
</html>

Method 2: Load Script Dynamically via app.component.ts

If you prefer a dynamic approach:

  1. Open src/app/app.component.ts
  2. Add the following code inside the ngOnInit() lifecycle hook:
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    const script = document.createElement("script");
    script.src =
      "https://cdn.jsdelivr.net/gh/atozdebug/chatbot-widget@latest/index.js";
    script.async = true;
    document.head.appendChild(script);
  }
}

Step 3: Run Your Angular App

  • Use Angular CLI to start your local server:
ng serve

✅ Tips​

  • Clear cache or use incognito to ensure latest script loads.
  • If the widget doesn’t load, check the console for any errors.
  • For advanced placement or configuration, consult BluBuddy support.

Having Trouble? Let's Troubleshoot!​

If your BluBuddy chatbot isn’t appearing or functioning properly on your Angular Site, try these quick fixes:

  1. Check Code Placement: Ensure the chatbot script is correctly pasted in Angular Site as per directions above.
  2. Verify Installation Code: Ensure that the "Update" button was pushed when the bot was being installed on Angular Site.
  3. Clear Cache & Refresh: Clear browser cache and refresh your website. Try opening it in Incognito Mode.

If everything is correct and you are still unable to move forward, write to us at hello@blubuddy.io Our Team will reach out to you as soon as possible for troubleshooting your problem.